.jui {
  .btn {
    position: relative;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    .box-sizing(border-box);
    
    &:focus {
      .tab-focus();
    }
    
    // Color & Size
    .btn-base;
    .btn-normal;
  }
  
  
  // Button Sizes
  // --------------------------------------------------

  .btn-large {
    padding: 0 15px;
    font-size: 16px;
    height: 38px;
    line-height: 38px;
    .border-radius(6px);
  }
  
  .btn-normal {
    padding: 0 12px;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    .border-radius(4px);
  }
  
  .btn-small {
    padding: 0 10px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    .border-radius(3px);
  }

  .btn-mini {
    padding: 0 8px;
    font-size: 11px;
    height: 22px;
    line-height: 22px;
    .border-radius(3px);
  }

  // Toggle
  .btn-toggle {
    padding-left: 4px;
    padding-right: 4px;
  }

  
  // Border Angular (직각)
  // --------------------------------------------------
  .btn-rect {
    .border-radius(0) !important;
  }


  // Button Colors
  // --------------------------------------------------
  
  // 0. Default
  .btn-base {
    border: 1px solid #bebebe;
    *border: 0; // Remove the border to prevent IE7's black border on input:focus
    border-bottom-color: darken(#ccc, 10%);
    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
    .buttonBackground2Color(#fff, #ededed);
    color: #000000;
    text-decoration: none;
    
    &.active, &:active {
      .btn-keep-base;
    }
  }
  
  // 1. purple
  .btn-purple {
    .buttonBackground4Color(rgb(246, 241, 255), rgb(227, 213, 247), rgb(212, 191, 241), rgb(243, 235, 255));
    border: 1px solid #b696ea;
    color: #201834;
    
    &:hover {
      .box-shadow(~"rgba(136, 74, 228, 0.3) 0 0 3px 1px");
      .buttonBackground4Color(rgb(246, 241, 255), rgb(236, 222, 255), rgb(229, 209, 255), rgb(243, 235, 255));
    }
    
    &.active, &:active {
      .btn-keep-purple;
    }
  }
  .btn-purple-gray {
    .btn-purple;
    
    &.active, &:active {
      .btn-keep-gray;
    }
  }
  .btn-purple-black {
    .btn-purple;
    
    &.active, &:active {
      .btn-keep-black;
    }
  }
  
  .btn-purple-flat() {
    .buttonBackground2Color(#f3ebff, #d4bff1);
    border: 1px solid #c4a9f2;
    
    &:hover {
      .buttonBackground2Color(#f6f1ff, #e5d2ff);
    }
  }
  .btn-purple.btn-flat {
    .btn-purple-flat();
  }
  .btn-purple-gray.btn-flat {
    .btn-purple-flat();
    
    &.active, &:active {
      .btn-keep-gray;
    }
  }
  .btn-purple-black.btn-flat {
    .btn-purple-flat();
    
    &.active, &:active {
      .btn-keep-black;
    }
  }
 
 
  // 2. gray
  .btn-gray {
    .buttonBackground4Color(rgb(255, 255, 255), rgb(234, 234, 234), rgb(218, 218, 218), rgb(247, 247, 247));
    border: 1px solid #b8b8b8;
    color: #201834;
    
    &:hover {
      .box-shadow(~"rgba(0, 0, 0, 0.15) 0 0 3px 1px");
      .buttonBackground4Color(rgb(255, 255, 255), rgb(240, 240, 240), rgb(230, 230, 230), rgb(255, 255, 255));
    }
    
    &.active, &:active {
      .btn-keep-gray;
    }
  }
  .btn-gray-purple {
    .btn-gray;
    
    &.active, &:active {
      .btn-keep-purple;
    }
  }
  .btn-gray-black {
    .btn-gray;
    
    &.active, &:active {
      .btn-keep-black;
    }
  }
  
  .btn-gray-flat() {
    .buttonBackground2Color(#f5f5f5, #e4e4e4);
    border: 1px solid #c8c8c8;
    
    &:hover {
      .buttonBackground2Color(#fff, #e9e9e9);
    }
  }
  .btn-gray.btn-flat {
    .btn-gray-flat();
  }
  .btn-gray-purple.btn-flat {
    .btn-gray-flat();
    
    &.active, &:active {
      .btn-keep-purple;
    }
  }
  .btn-gray-black.btn-flat {
    .btn-gray-flat();
    
    &.active, &:active {
      .btn-keep-black;
    }
  }
  
  
  // 3. black
  .btn-black {
    .buttonBackground4Color(rgb(93, 93, 93), rgb(45, 45, 45), rgb(0, 0, 0), rgb(63, 63, 63));
    border: 1px solid #000000;
    color: #ffffff;
    
    &:hover {
      color: #ffffff;
      .buttonBackground4Color(rgb(108, 108, 108), rgb(63, 63, 63), rgb(19, 19, 19), rgb(63, 63, 63));
    }
    
    &.active, &:active {
      .btn-keep-black;
    }
  }
  .btn-black-purple {
    .btn-black;
    
    &.active, &:active {
      .btn-keep-purple;
    }
  }
  .btn-black-gray {
    .btn-black;
    
    &.active, &:active {
      .btn-keep-gray;
    }
  }
  
  .btn-black-flat() {
    .buttonBackground2Color(#505050, #303030);
    border: 1px solid #393939;
    
    &:hover {
      .buttonBackground2Color(#5d5d5d, #3b3b3b);
    }
  }
  .btn-black.btn-flat {
    .btn-black-flat();
  }
  .btn-black-gray.btn-flat {
    .btn-black-flat();
    
    &.active, &:active {
      .btn-keep-gray;
    }
  }
  .btn-black-purple.btn-flat {
    .btn-black-flat();
    
    &.active, &:active {
      .btn-keep-purple;
    }
  }
  
  
  // Button Keep
  // --------------------------------------------------
  
  .btn-keep-base {
    &:not([disabled]) {
      .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
    }
  }
  
  .btn-keep-purple {
    &:not([disabled]) {
      color: #000;
      border: 1px solid #a484da;
      .box-shadow(~"rgba(62, 32, 99, 0.6) 0 1px 5px inset, rgba(255, 255, 255, 0.2) 0 1px 0");
      .buttonBackground2Color(rgb(201, 168, 244), rgb(227, 210, 255));
    }
  }
  
  .btn-keep-gray {
    &:not([disabled]) {
      color: #000;
      border: 1px solid #aaaaaa;
      .box-shadow(~"rgba(0, 0, 0, 0.3) 0 1px 5px inset, rgba(255, 255, 255, 0.2) 0 1px 0");
      .buttonBackground2Color(rgb(225, 225, 225), rgb(245, 245, 245));
    }
  }
  
  .btn-keep-black {
    &:not([disabled]) {
      color: #fff;
       border: 1px solid #000000;
      .box-shadow(~"rgba(0, 0, 0, 0.6) 0 2px 1px inset");
      .buttonBackground2Color(rgb(41, 41, 41), rgb(68, 68, 68));
    }
  }
  
  // Button Disabled
  // --------------------------------------------------

  .btn[disabled], .disabled {
    .opacity(50);
    cursor: not-allowed;
  }
}
